<template>
  <div class="achievements-container">
    <el-card class="achievements-info">
      <template #header>
        <div class="card-header">
          <span>【成就系统】</span>
        </div>
      </template>
      
      <el-tabs v-model="activeTab" class="achievement-tabs">
        <el-tab-pane label="修仙成就" name="cultivation">
          <el-table :data="cultivationAchievements" style="width: 100%">
            <el-table-column prop="name" label="成就名称" />
            <el-table-column prop="description" label="描述" />
            <el-table-column prop="status" label="状态">
              <template #default="scope">
                <el-tag :type="scope.row.completed ? 'success' : 'info'">
                  {{ scope.row.completed ? '已完成' : '未完成' }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="reward" label="奖励" />
          </el-table>
        </el-tab-pane>
        
        <el-tab-pane label="探索成就" name="exploration">
          <el-table :data="explorationAchievements" style="width: 100%">
            <el-table-column prop="name" label="成就名称" />
            <el-table-column prop="description" label="描述" />
            <el-table-column prop="status" label="状态">
              <template #default="scope">
                <el-tag :type="scope.row.completed ? 'success' : 'info'">
                  {{ scope.row.completed ? '已完成' : '未完成' }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="reward" label="奖励" />
          </el-table>
        </el-tab-pane>
        
        <el-tab-pane label="收集成就" name="collection">
          <el-table :data="collectionAchievements" style="width: 100%">
            <el-table-column prop="name" label="成就名称" />
            <el-table-column prop="description" label="描述" />
            <el-table-column prop="status" label="状态">
              <template #default="scope">
                <el-tag :type="scope.row.completed ? 'success' : 'info'">
                  {{ scope.row.completed ? '已完成' : '未完成' }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="reward" label="奖励" />
          </el-table>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script>
import { ref } from 'vue'

export default {
  name: 'Achievements',
  setup() {
    const activeTab = ref('cultivation')

    const cultivationAchievements = ref([
      { name: '初入仙途', description: '成功筑基', completed: true, reward: '修为+100' },
      { name: '金丹大道', description: '凝结金丹', completed: false, reward: '修为+500' },
      { name: '元婴初成', description: '修炼至元婴期', completed: false, reward: '修为+1000' }
    ])

    const explorationAchievements = ref([
      { name: '初探世界', description: '探索5个区域', completed: true, reward: '金币+100' },
      { name: '地图猎人', description: '探索所有区域', completed: false, reward: '修为+300' },
      { name: '秘境探险家', description: '探索3个秘境', completed: false, reward: '法宝碎片x5' }
    ])

    const collectionAchievements = ref([
      { name: '小有收获', description: '收集10件物品', completed: true, reward: '背包容量+10' },
      { name: '收藏家', description: '收集100件物品', completed: false, reward: '仓库容量+50' },
      { name: '功法大师', description: '收集所有功法', completed: false, reward: '随机功法x1' }
    ])
    
    return {
      activeTab,
      cultivationAchievements,
      explorationAchievements,
      collectionAchievements
    }
  }
}
</script>

<style scoped>
.achievements-container {
  padding: 20px; overflow-y: auto; scrollbar-width: none; /* Firefox */
-webkit-scrollbar: none; /* Chrome, Safari and Opera */
  max-width: 800px;
  margin: 0 auto;
  padding-bottom: 70px; /* 为底部导航留出空间 */
  padding-top: 50px; /* 为顶部状态栏留出空间 */
}

.card-header {
  font-weight: bold;
}

/* 移动端适配 */
@media screen and (max-width: 768px) {
  .achievements-container {
    padding: 10px;
    padding-bottom: 70px; /* 为底部导航留出空间 */
    padding-top: 45px; /* 为顶部状态栏留出空间 */
  }
  

  
  .el-card__header,
  .el-card__body {
    padding: 12px;
  }
  
  /* 表格在移动端适配 */
  .el-table {
    font-size: 12px;
  }
  
  .el-table th,
  .el-table td {
    padding: 5px 0;
  }
}

@media screen and (max-width: 480px) {
  .achievements-container {
    padding-top: 40px; /* 为顶部状态栏留出空间 */
  }
  
  .el-card__header,
  .el-card__body {
    padding: 10px;
  }
  
  /* 表格在移动端适配 */
  .el-table {
    font-size: 10px;
  }
  
  .el-table th,
  .el-table td {
    padding: 4px 0;
  }
}

/* 移除了所有动画样式 */
</style>